<div class=" ui-g m-t-20">

    <div class=" ui-g ui-g-nopad" style="width:100%;">

        <div class="ui-g-12 ui-g-nopad">

            <p-tabView  [type]="1">
                <p-tabPanel header="个人资料" [type]="1">
                    <form novalidate class="form-horizontal p-t-6" role="form">
                        <div class="pull-right" style="margin-top: 10px;">
                            <button pButton type="button" (click)="save()" class="btn btn-success m-l-8" label="保存"></button>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 p-required opacity06 color-333">姓名：</div>
                            <div class="table-cell" style="width:400px">
                                <input type="text" #name="ngModel" (blur)="userValidate()" [ngClass]="nameCheckShow?'p-input-error':''" placeholder="请输入姓名" name="name" minlength="1" maxlength="20" required class="p-input border-eaeaea" size="30" pInputText [(ngModel)]="personalObj.fullName" (focus)="nameCheckShow=false">
                            </div>
                            <div class="table-cell " *ngIf="nameCheckShow">
                                <p-message severity="error" [text]="nameTip"></p-message>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 p-required opacity06 color-333">性别：</div>
                            <div class="table-cell ">
                                <p-radioButton name="sex" value="sex_man" label="男" [(ngModel)]="personalObj.sex" ></p-radioButton>
                                <p-radioButton name="sex" value="sex_woman" label="女" [(ngModel)]="personalObj.sex" ></p-radioButton>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 opacity06 color-333">居住地：</div>
                            <div class="table-cell">
                                <div style="display: inline-block;width: 33%;">
                                <p-dropdown optionLabel="name" placeholder="请选择省" dataKey="code" name="addressProvinceCode" styleClass="width-full border-eaeaea" [options]="addressProvinceCodeArr"
                                    [(ngModel)]="addressObj.addressProvince" (onChange)="chooseCity(addressObj.addressProvince)"></p-dropdown>
                                </div>
                                <div style="display: inline-block;width: 33%;">
                                <p-dropdown optionLabel="name" placeholder="请选择市" dataKey="code" name="addressCityCode" styleClass="width-full border-eaeaea" [options]="addressCityCodeArr"
                                    [(ngModel)]="addressObj.addressCity" (onChange)="chooseDistrict(addressObj.addressCity)"></p-dropdown>
                                </div>
                                <div style="display: inline-block;width: 32%;">
                                <p-dropdown optionLabel="name" placeholder="请选择区/乡/镇" dataKey="code" name="addressDistrictCode" styleClass="width-full border-eaeaea" [options]="addressDistrictCodeArr"
                                    [(ngModel)]="addressObj.addressDistrict"></p-dropdown>
                                </div>
                            </div>
                            <div class="table-cell">
                                <div style="display: inline-block;min-width: 250px;padding-left: 10px;">
                                    <input  type="text" name="addressDetail" class="p-input border-eaeaea" maxlength="25" size="30" placeholder="详细地址" pInputText [(ngModel)]="personalObj.addressDetail">
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 v-top p-required opacity06 color-333">个人简介：</div>
                            <div class="table-cell">
                                <textarea rows="5" style="padding: 10px;"  placeholder="请输入个人简介"  #textarea name='textarea' maxlength="70" cols="30" [(ngModel)]="personalObj.introduction" class="width-full border-eaeaea" pInputTextarea (blur)="briefValidate()" (focus)="briefCheckShow=false"  [ngClass]="briefCheckShow?'p-input-error':''"></textarea>
                                <div class="text-right opacity06 color-333">还可输入{{70 - (personalObj.introduction?.length || 0)}}个字</div>
                            </div>
                            <div class="table-cell " *ngIf="briefCheckShow">
                                <p-message severity="error" [text]="briefTip"></p-message>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 opacity06 color-333">固定电话：</div>
                            <div class="table-cell ">
                                <input  type="text" name="specialPlane" class="p-input border-eaeaea" size="15" maxlength="15" pInputText [(ngModel)]="personalObj.specialPlane">
                            </div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 opacity06 color-333">微信号：</div>
                            <div class="table-cell ">
                                <input  type="text" name="weChat" class="p-input border-eaeaea" size="15" maxlength="20" pInputText [(ngModel)]="personalObj.weChat">
                            </div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell text-right p-l-25 opacity06 color-333">邮箱：</div>
                            <div class="table-cell ">
                                <input  type="text" name="mail" class="p-input border-eaeaea" size="15" maxlength="50" (focus)="emailRight =true" [ngClass]="!emailRight?'p-input-error':''" pInputText [(ngModel)]="personalObj.mail" (blur)="emailTest(personalObj.mail)">
                            </div>
                            <!-- 错误消息 -->
                            <div class="table-cell " *ngIf="!emailRight">
                                <p-message severity="error" text="请输入正确的邮箱"></p-message>
                            </div>
                        </div>
                    </form>
                </p-tabPanel>
                <p-tabPanel header="设置头像" [type]="1">
                    <div class="p-l-16">
                        <div class="opacity06 color-333 l-h-54">选择本地照片，上传编辑自己的头像</div>
                        <div class="file-icon" >
                            <span *ngIf="false" class="fa fa-user"></span>
                            <img src="{{imgUrl}}" alt="头像" onError="this.src='/assets/imgs/defaultIcon.png'" width="100" height="auto">
                            <input id="custom-input"  class="h-pointer" #custom accept="image/gif,image/png,image/bmp,image/jpeg,image/jpg" type="file" (change)="fileChangeListener($event);display1 = true">
                            <span class="fa fa-camera"></span>
                        </div>
                        <div class="opacity06 color-333 l-h-54">支持jpg、jpeg、gif、png、bmp格式的图片</div>
                        <p-dialog header="头像上传"  [(visible)]="display1" modal="modal" width="550" height="390" [responsive]="true">
                            <div class="text-center">
                                <div class="inline-block" style="margin:32px 0" >
                                    <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
                                </div>
                            </div>
                            <div class="text-center">
                                <button pButton type="button"  (click)="custom.click()" label="重新选择" class="btn btn-primary v-middle m-l-40"></button>
                                <button pButton type="button"  (click)="upLoad();display1 = false;custom.value=''" label="保存" class="btn btn-success v-middle m-l-40"></button>
                            </div>
                        </p-dialog>
                    </div>
                </p-tabPanel>
                <p-tabPanel header="修改密码" [type]="1">

                    <form #form1="ngForm" (ngSubmit)="form1.form.valid"  novalidate class="form-horizontal  p-t-6">
                    <div class="pull-right" style="margin-top: 10px;">
                        <button pButton type="button" (click)="updatePwd()" class="btn btn-success m-l-8" label="保存"></button>
                    </div>
                      <!--请输入6-12位数字与字母组合-->
                      <div class="table-row">
                        <div class="table-cell text-right p-l-25 p-required font-14 opacity06 color-333">原密码:</div>
                        <div class="table-cell relative" >
                          <input type="password" #accountPassword="ngModel" placeholder="请输入原密码" name="accountPassword" [ngClass]="oldPwdCheckShow?'p-input-error':''" (blur)="oldPwdValidate()"(focus)="oldPwdCheckShow=false" onkeyup="value=value.replace(/[^\w]/ig,'')"  minlength="2" maxlength="12"  required class="p-input border-eaeaea" size="30" pInputText [(ngModel)]="objToPost.accountPassword" >
                        </div>
                        <div class="table-cell " *ngIf="oldPwdCheckShow">
                            <p-message severity="error" [text]="oldPwdTip"></p-message>
                        </div>
                        <div class="table-cell color-333 opacity06 p-l-10" *ngIf="!oldPwdCheckShow">
                            密码为6-12位数字和字母组合
                        </div>
                      </div>
                      <!--请输入6-12位数字与字母组合-->
                      <div class="table-row">
                        <div class="table-cell text-right p-l-25 p-required font-14 opacity06 color-333">新密码:</div>
                        <div class="table-cell relative">
                            <input type="password" #newPwd="ngModel" name="newPwd" [ngClass]="newPwdCheckShow?'p-input-error':''" placeholder="请输入新密码" (blur)="newPwdValidate()"(focus)="newPwdCheckShow=false" onkeyup="value=value.replace(/[^\w]/ig,'')" required class="p-input border-eaeaea" maxlength="12" pInputText [(ngModel)]="objToPost.newPwd">
                        </div>
                        <div class="table-cell " *ngIf="newPwdCheckShow">
                            <p-message severity="error" [text]="newPwdTip"></p-message>
                        </div>
                        <div class="table-cell color-333 opacity06 p-l-10" *ngIf="!newPwdCheckShow">
                            密码为6-12位数字和字母组合
                        </div>
                      </div>


                      <!--您两次输入的密码不一致，请重新输入-->
                      <!--请输入6-12位数字与字母组合-->
                      <div class="table-row">
                        <div class="table-cell text-right p-l-25 p-required font-14 opacity06 color-333">再次输入:</div>
                        <div class="table-cell relative">
                          <input type="password" #confirmPwd="ngModel" name="confirmPwd" [ngClass]="conPwdCheckShow?'p-input-error':''" placeholder="请再次输入新密码" (blur)="conPwdValidate()"(focus)="conPwdCheckShow=false" onkeyup="value=value.replace(/[^\w]/ig,'')" required class="p-input border-eaeaea" maxlength="12" pInputText [(ngModel)]="objToPost.confirmPwd">
                        </div>
                        <div class="table-cell " *ngIf="conPwdCheckShow">
                            <p-message severity="error" [text]="conPwdTip"></p-message>
                        </div>
                        <div class="table-cell color-333 opacity06 p-l-10" *ngIf="!conPwdCheckShow">
                            密码为6-12位数字和字母组合
                        </div>
                      </div>

                      <!--保存-->
                      <!--您输入的密码不是原密码，请重新输入-->
                      <!--新密码不能与原密码相同-->

                      <!--修改成功，请重新登录-->

                    </form>
                </p-tabPanel>
                <p-tabPanel header="绑定手机" styleClass="p-t-25" [type]="1">
                    <div class="opacity06 color-333 l-h-44 p-l-16">绑定手机可以用来登录和找回密码</div>
                    <div class="color-333 l-h-44 p-l-16">
                        <span class="opacity06 inline-block">绑定手机号：</span>
                        <span class="inline-block m-l-8">{{mobile}}</span>
                        <span (click)="change = true" class="inline-block color-1a91eb h-pointer m-l-5">更换</span>
                    </div>
                </p-tabPanel>
            </p-tabView>
            <router-outlet></router-outlet>
        </div>
    </div>




    <!-- 弹框 -->
    <p-dialog [header]="next?'绑定新手机号':'更换手机号'" [(visible)]="change" modal="modal" width="700" [responsive]="true" (onHide)="reset(form2)">
        <div class="text-center">
            <div class="inline-block">
                <form #form2="ngForm" (ngSubmit)="form2.form.valid" novalidate class="form-horizontal">
                    <div *ngIf="!next">
                        <div class="title font-14 opacity06 color-333">为了保障您的帐号安全，变更信息前需验证身份</div>
                        <div class="table-row">
                                <div class="table-cell text-right p-l-20 l-h-32 opacity06 color-333">你当前手机号为：</div>
                                <div class="table-cell color-333" style="text-align:left;">{{mobile}}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-20 p-required opacity06 color-333 l-h-44">当前手机号：</div>
                            <div class="table-cell " >
                                <input type="text" name="default" required class="p-input width-200 border-eaeaea" size="30" pInputText maxlength="11" [(ngModel)]="originMobile" (focus)="isFucos=true" (blur)="isFucos=false"
                                    placeholder="请输入当前完整手机号" (blur)="validMobile()" [ngClass]="!isFucos&&(phone.errors?.required&&(phone.touched || submited)||phone.errors?.pattern||!isJump) ?'p-input-error':''" pattern="^(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})$" #phone="ngModel">
                            </div>
                            <div class="table-cell relative">
                                    <p-message styleClass="p-center" [severity]="'error'" [text]="{'请输入手机号码':!isFucos&&phone.errors?.required&&(phone.touched || submited),'手机号码格不正确':phone.errors?.pattern&&!isFucos,'输入的手机号不正确':!isFucos&&!isJump}"></p-message>
                            </div>
                        </div>

                        <div class="table-row">
                            <div class="table-cell text-right p-l-20"></div>
                            <div class="table-cell text-left p-t-0">
                                <button pButton type="button" label="下一步" class="btn btn-secondary m-btn-dialog"
                                    (click)="form2.form.valid?adapter(next):submited = true"></button>
                            </div>
                        </div>
                    </div>

                    <div *ngIf="next">
                        <div class="title font-14 opacity06 color-333">请勿随意泄露手机号，以防被不法分子利用，骗取帐号信息</div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-20 p-required l-h-32 opacity06 color-333">新手机号：</div>
                            <div class="table-cell ">
                                <input type="text" name="newMobile" required class="p-input width-220 border-eaeaea" size="11" maxlength="11" pInputText [(ngModel)]="newMobile" (focus)="phone1.errors=null;isExistMobile=false" (blur)="isFucos=false"
                                    placeholder="请输入新手机号" (blur)="userIsExistsByMobile()" [ngClass]="!isFucos&&(phone1.errors?.required&&(phone1.touched || submited)||phone1.errors?.pattern) ?'p-input-error':''" pattern="^(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})$" #phone1="ngModel">
                            </div>
                            <!-- 错误消息 -->
                            <div class="table-cell relative">
                                <p-message [severity]="'error'" styleClass="p-center" [text]="{'请输入新手机号':!isFucos&&phone1.errors?.required&&(phone1.touched || submited),'手机号码格式不正确':!isFucos&&phone1.errors?.pattern,'手机号已存在':!isFucos&&isExistMobile}"></p-message>
                            </div>
                        </div>

                        <div class=" clearfix text-center l-h-66">
                            <div class="pull-left text-right p-l-20 p-required opacity06 color-333  w-104">验证码：</div>
                            <div class="pull-left">
                                <div style="line-height: 66px;display:inline-block">
                                    <input type="text" name="phoneCode" required class="p-input width-110 border-eaeaea m-r-6" size="4" maxlength="4" pInputText [(ngModel)]="phoneCode" #phone2="ngModel" (focus)="changePhoneMsg=0" (focus)="isFucos1=true"
                                    placeholder="请输入验证码" [ngClass]="!isFucos&&(phone2.errors?.required&&(phone2.touched || submited)) ?'p-input-error':''">
                                </div>
                                <div style="line-height: 66px;display:inline-block">
                                    <button pButton type="button"  [label]="countdown?(countdown+'s'):'发送验证码'" class="btn h-pointer h-4 bg-1a91eb color-fff" (click)="sendMsg()"></button>

                                </div>
                                <!--<button pButton type="button" [disabled]="phone1.errors?.required || phone1.errors?.pattern || countdown" [label]="countdown?countdown:'发送验证码'" class="btn btn-success h-pointer" (click)="sendMsg()"></button>-->
                            </div>
                            <!-- 错误消息 -->
                            <div class="pull-left relative" style="top: 33px;">
                                <p-message [severity]="'error'" styleClass="p-center" [text]="{'请输入验证码':!isFucos1&&phone2.errors?.required&&(phone2.touched || submited),'验证码不正确':!isFucos1&&changePhoneMsg=='1','验证码已失效':!isFucos1&&changePhoneMsg=='2'}"></p-message>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right p-l-20 w-104"></div>
                            <div class="table-cell text-left p-t-0">
                                <button pButton type="button" label=" 提交" class="btn btn-success m-btn-dialog"
                                    (click)="form2.form.valid?adapter(next):submited = true"></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </p-dialog>
